<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</head>
<body>
<fieldset class="table-search-fieldset" style="border: solid 1px #EEEEEE">
  <div style="margin: 10px 10px 10px 10px">
    <form class="layui-form layui-form-pane" action="">
      <div class="layui-form-item">
        <div class="layui-row">
          
          <div class="layui-col-md1">
            <label class="layui-form-label" lay-over="over">订单编号</label>
          </div>

          <div class="layui-col-md4">
            <input type="text" name="querykey"  placeholder="" autocomplete="off" class="layui-input">
          </div>

          <div class="layui-col-md2 layui-col-md-offset1">
            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
          </div>

        </div>

      </div>
    </form>
  </div>
</fieldset>

<div style="padding: 16px;">
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>



<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="detail"><img src="../images/详情 (3).png"  style="width: 24px;margin-left: -1px;margin-top: -3px;"></a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>


<script>
  layui.use(['table', 'dropdown'], function(){
    var table = layui.table;
    var table2 = layui.table;
    var $=layui.$;
    var dropdown = layui.dropdown;

    var requrl="http://localhost:8080/restaurant_web_war_exploded/";

    // 创建渲染实例
    table.render({
      elem: '#test',
      url: requrl+'orders/listOrders', // 此处为静态模拟数据，实际使用时需换成真实接口
      totalRow: true, // 开启合计行
      page: true,
      parseData:function(res){
                // total=res.data.total;
                return{
                    code: 0, //解析接口状态
                    msg: res.message, //解析提示文本
                    count: res.data.total, //解析数据长度
                    data: res.data.list //解析数据列表
                }
      },
      cols: [[
        {field:'orderId', fixed: 'left', title: 'ID',width:100},
        {field:'accountId', title: '管理员编号',width:100},
        {field:'orderWay', title:'下单方式',width:100,templet:function(d){
          return d.orderWay===1?'堂食':'外送';
        }},
        {field:'orderTime', title:'下单时间',width:200},
        {field:'orderPay', title:'应付金额',width:100},
        {field:'orderPays', title:'实付金额',width:100},
        {field:'orderCheap', title:'优惠劵'},
        {field:'orderStatus', title:'订单情况',templet:function(d){
          return d.orderStatus===1?'配送中':'已完成';
        }},
        {fixed: 'right', title:'操作', toolbar: '#barDemo'}
      ]]
    });

    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      // console.log(obj)
      // console.log("=======>"+data.orderId);
      if(obj.event === 'detail'){
        layer.open({
          title: '查看详情',
          type: 1,
          area: ['50%','60%'],
          content: '<div class="layui-container" style="width: 98%"><table id="transfer" lay-filter="transfer" class=""></table></div>',
          success: function () {
            table2.render({
              elem: '#transfer'  // 弹出层表格id
              ,url: requrl+"orderDetails/listOrderDetails"  // 后端请求URL地址
              ,where: {  // derail表格的值
                'orderId': data.orderId
              }
              ,page: false,
              cols: [[
                 {field: 'orderId', title: '订单编号', width:120}
                 ,{field: 'mealId', title: '套餐编号', width:100}
                ,{field: 'varietyId',width:100, title: '菜品编号',}
                ,{field: 'orderDetailsRemark', title: '口味', width: 100}
                ,{field: 'orderDetailsPrice', title: '价格'}
                ,{field: 'orderDetailsCount', title: '数量', width: 100}
              ]],
              parseData:function(res){
                enSureData=res.data==null?true:false;    
                let list=[{content: "暂无数据，请稍后再试"}]
                let mydata=res.data==null?list:res.data.list;
                return{
                    code: 0, //解析接口状态
                    msg: res.message, //解析提示文本
                    count: res.data===null?0:res.data.total, //解析数据长度
                    data: mydata //解析数据列表
                }
              },
              // 以下为transfer表格的定义
              done:function(res){
                if(enSureData){
                  $('#transfer').empty().append('<h2 style="color:red">该订单暂无详情信息...<h2/>');       
                }
              }
            })
          }
        });
      } else if(obj.event === 'more'){
        // 更多 - 下拉菜单
        dropdown.render({
          elem: this, // 触发事件的 DOM 对象
          show: true, // 外部事件触发即显示
          data: [{
            title: '查看',
            id: 'detail'
          },{
            title: '删除',
            id: 'del'
          }],
          click: function(menudata){
            if(menudata.id === 'detail'){
              layer.msg('查看操作，当前行 ID:'+ data.id);
            } else if(menudata.id === 'del'){
              layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                obj.del(); // 删除对应行（tr）的DOM结构
                layer.close(index);
                // 向服务端发送删除指令
              });
            }
          },
          align: 'right', // 右对齐弹出
          style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
        })
      }
    });

  });
</script>

</body>
</html>